<script lang="ts" setup>
import {reactive} from 'vue';
import {LockOutlined, UserOutlined} from '@ant-design/icons-vue';
import {useRouter} from 'vue-router';
import {loginAPI} from "@/apis/user.ts";
import {message} from "ant-design-vue";
import {useInfoStore} from "@/store/user/user.ts";

interface FormState {
  account: string;
  password: string;
}

const formState = reactive<FormState>({
  account: '',
  password: '',
});
const onFinish = async (values: any) => {
  console.log('Success:', values);
  const res = await loginAPI(formState);
  if (res.data.flag) {
    useInfoStore().setUserInfo(res.data.data);  // 存储用户信息
    message.success('登录成功', 3);
    if (res.data.data.userRole === 'admin') { // 跳转到管理员页面
      await router.replace('/admin/home');
    } else if (res.data.data.userRole === 'employer') { // 跳转到企业页面
      await router.replace('/employer/home');
    } else { // 跳转到求职者页面
      await router.replace('/jobseeker/home');
    }
  }

};

const onFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo);
};


// 跳转注册
const router = useRouter();
const handleRegister = () => {
  router.push('/register');
};
</script>

<template>
  <div class="login">
    <div class="login-form">
      <h2>登录-在线兼职招聘系统，了解更多信息</h2>
      <a-divider/>
      <div class="div-bottom">
        <div class="life">
          <a-form
              :model="formState"
              autocomplete="off"
              name="basic"
              style="width: 100%;padding: 20px;margin-top: 20px;"
              @finish="onFinish"
              @finishFailed="onFinishFailed"
          >
            <a-form-item
                :rules="[{ required: true, message: '请输入你的账号!' }]"
                label="账号"
                name="account"
            >
              <a-input v-model:value="formState.account">
                <template #prefix>
                  <user-outlined/>
                </template>
              </a-input>
            </a-form-item>

            <a-form-item
                :rules="[{ required: true, message: '请输入你的密码!' }]"
                label="密码"
                name="password"

            >
              <a-input-password v-model:value="formState.password" :visibilityToggle="false">
                <template #prefix>
                  <LockOutlined class="site-form-item-icon"/>
                </template>
              </a-input-password>
            </a-form-item>
            <a-form-item>
              <div style="display: flex; justify-content: space-around; ">
                <a-button html-type="submit" style="width: 45%" type="primary">登录</a-button>
                <a-button ghost style="width: 45%" type="primary" @click="handleRegister"> 注册</a-button>
              </div>
              <a-button type="link">忘记密码？</a-button>
            </a-form-item>
          </a-form>
        </div>
        <div class="right">
          <a-image
              src="src/assets/logo.jpg"
              style="width: 100%; height: auto"
          />
        </div>

      </div>
      <p style="color: #8A9EB9;font-size: 13px">
        注册登录即表示您已阅读并同意遵守我们的
        <a href="#">《服务协议》 </a>
        和
        <a href="#">《隐私政策》</a>
      </p>
    </div>

  </div>
</template>

<style lang="scss" scoped>
.login {
  border: 1px solid #ccc;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;

  .login-form {
    width: 650px;
    height: 500px;
    margin-top: 60px;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 20px;

    h2 {
      text-align: center;
    }

    .div-bottom {
      display: flex;
      justify-content: space-between;

      .life {
        width: 57%;
        height: 350px;
        border-right: 1px solid #ccc;
        display: flex;
        justify-items: center;
      }

      .right {
        width: 40%;
        height: 350px;
      }
    }

  }

  a {
    color: #1677FF;
  }
}
</style>
